<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序猴后台管理系统安装程序</title>
    <link href="/static/admin/common/layui/css/layui.css" rel="stylesheet" />
    <link href="/static/install/css/install.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <![endif]-->

    <!--[if IE 8]>
    <![endif]-->
    <style>
        .layui-form-item .layui-input-inline{
            width: 196px;
        }
    </style>
</head>
<body>
<div class="install-container">
    <div class="paper">
        <div class="paper-heading" style="margin-bottom: 80px;">
            <h2 style="display: inline-block;float: left;margin-right: 30px;"><img src="/static/install/images/install_logo.png" alt="" width="80"></h2>
            <h1 style="display: inline-block;float: left;line-height: 80px;"><span class="brand">程序猴后台管理系统</span><span class="text-muted">安装向导</span></h1>
        </div>
        <div class="paper-body">
            <div class="layui-progress layui-progress-big" lay-showPercent="true">
                <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
            </div>
            <div class="install-box">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>数据库配置</legend>
                </fieldset>
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label">服务器地址</label>
                        <div class="layui-input-inline w200" >
                            <input type="text" class="layui-input" name="hostname" lay-verify="title" value="127.0.0.1">
                        </div>
                        <div class="layui-form-mid layui-word-aux">数据库服务器地址，一般为127.0.0.1</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库端口</label>
                        <div class="layui-input-inline w200">
                            <input type="text" class="layui-input" name="hostport" lay-verify="title" value="3306">
                        </div>
                        <div class="layui-form-mid layui-word-aux">系统数据库端口，一般为3306</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库名称</label>
                        <div class="layui-input-inline w200">
                            <input type="text" class="layui-input" name="database" lay-verify="title">
                        </div>
                        <div class="layui-form-mid layui-word-aux">系统数据库名,必须包含字母</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库账号</label>
                        <div class="layui-input-inline w200">
                            <input type="text" class="layui-input" name="username" lay-verify="title">
                        </div>
                        <div class="layui-form-mid layui-word-aux">连接数据库的用户名</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库密码</label>
                        <div class="layui-input-inline w200">
                            <input type="password" class="layui-input" name="password" lay-verify="title">
                        </div>
                        <div class="layui-form-mid layui-word-aux">连接数据库的密码</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库前缀</label>
                        <div class="layui-input-inline w200">
                            <input type="text" class="layui-input" name="prefix" lay-verify="title" value="cxh_">
                        </div>
                        <div class="layui-form-mid layui-word-aux">建议使用默认,数据库前缀必须带 '_'</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">覆盖数据库</label>
                        <div class="layui-input-inline w200">
                            <input type="radio" name="cover" value="1" title="覆盖">
                            <input type="radio" name="cover" value="0" title="不覆盖" checked>
                        </div>
                        <div class="layui-form-mid layui-word-aux">建议使用默认,数据库前缀必须带 '_'</div>
                    </div>
                    <div class="layui-form-item">
                        <button type="submit" class="layui-btn fl" style="margin-left:120px;" lay-submit="" lay-filter="lianjie">测试数据库连接并创建数据库</button>
                    </div>
                </form>



                <form class="layui-form layui-form-pane" action="?step=5" method="post">
                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>管理账号设置</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理员账号</label>
                        <div class="layui-input-inline w200">
                            <input type="text" class="layui-input" name="account" lay-verify="title">
                        </div>
                        <div class="layui-form-mid layui-word-aux">管理员账号最少4位</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">管理员密码</label>
                        <div class="layui-input-inline w200">
                            <input type="password" class="layui-input" name="password" lay-verify="title">
                        </div>
                        <div class="layui-form-mid layui-word-aux">保证密码最少6位</div>
                    </div>
                    <div class="step-btns">
                        <a href="javascript:history.back(-1);" class="layui-btn layui-btn-primary layui-btn-big fl">返回上一步</a>
                        <button type="submit" class="layui-btn layui-btn-big layui-btn-normal fr" lay-submit="" lay-filter="formSubmit">立即执行安装</button>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/static/admin/common/layui/layui.js"></script>
<script type="text/javascript">
    layui.define(['element', 'form'], function(exports) {
        var $ = layui.jquery, layer = layui.layer, form = layui.form;
        form.on('submit(lianjie)', function(data) {
            $.ajax({
                type:"POST",
                url:"{:url('install/index/step4')}",
                dataType:"JSON",
                data:data.field,
                success:function(res){
                    if(res.code == '1'){
                        layer.msg(res.msg, {icon: 6});
                        //console.log(data.code);
                    }else{
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });
            return false;
        });
        form.on('submit(formSubmit)', function(data) {
            $.ajax({
                type:"POST",
                url:"{:url('install/index/step5')}",
                dataType:"JSON",
                data:data.field,
                success:function(res){
                    if(res.code == '1'){
                        layer.msg(res.msg, {icon: 6});
                        $(function () {
                            setTimeout(function () {
                                window.location.href="{:url('admin/index/index')}";
                            }, 1);

                        })

                    }else{
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>